<template>
  <div>
    <el-form
      :inline="true"
      :model="formInline"
      class="demo-form-inline"
      @keyup.enter.native="search()"
    >
      <el-form-item label="卡券类型：">
        <el-select v-model="formInline.couponType">
          <el-option label="通用券" value="1"></el-option>
          <el-option label="定向券" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="使用状态：">
        <el-select v-model="formInline.status">
          <el-option label="未使用" value="1"></el-option>
          <el-option label="已使用" value="2"></el-option>
          <el-option label="已失效" value="3"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="卡券名称/编号：">
        <el-input
          v-model="formInline.couponName"
          placeholder="优惠券编号/名称"
        ></el-input>
      </el-form-item>
      <el-form-item label="会员名称/手机：">
        <el-input
          v-model="formInline.memberName"
          placeholder="会员名称/手机"
        ></el-input>
      </el-form-item>
      <el-form-item label="门店名称/编号：">
        <el-input
          v-model="formInline.storeName"
          placeholder="门店名称/编号"
        ></el-input>
      </el-form-item>
      <el-form-item label="领取时间：">
        <el-date-picker
          v-model="formInline.createTimeBegin"
          type="date"
          value-format="yyyy-MM-dd"
          style="width:150px;"
        ></el-date-picker
        >至
        <el-date-picker
          v-model="formInline.createTimeEnd"
          type="date"
          value-format="yyyy-MM-dd"
          style="width:150px;"
        ></el-date-picker>
      </el-form-item>
      <!--
      <el-form-item label="使用时间：">
        <el-date-picker v-model="formInline.useTimeBegin"
          type="date" value-format="yyyy-MM-dd" style="width:150px;"></el-date-picker>至
        <el-date-picker v-model="formInline.useTimeEnd"
          type="date" value-format="yyyy-MM-dd" style="width:150px;"></el-date-picker>
      </el-form-item>
      <el-form-item label="所在大区：">
        <el-select v-model="formInline.warzone">
          <el-option v-for="item in warzoneList" :key="item.orgSeq" :label="item.orgName" :value="item.orgSeq"></el-option>
        </el-select>
      </el-form-item>
            -->
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          @click="search()"
          size="mini"
          >查询</el-button
        >
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          @click="kong()"
          size="mini"
          icon="el-icon-delete"
          >清空</el-button
        >
      </el-form-item>
      <el-button
        @click="exportToo"
        style="margin-top: 0px;"
        size="mini"
        type="success"
        icon="el-icon-s-data"
        :loading="exportLoading"
        >导出</el-button
      >
      <el-button
        type="primary"
        @click="showConfigTableDialog()"
        size="mini"
        icon="el-icon-setting"
        :loading="insertLoading"
        >列表配置</el-button
      >
    </el-form>

    <el-table
      :data="tableData"
      v-loading="loading"
      border
      style="width: 100%;"
      :header-cell-style="{ background: '#ebecf0', color: '#606266' }"
    >
      <el-table-column
        type="index"
        width="60"
        label="序号"
        align="center"
      ></el-table-column>
      <el-table-column
        v-for="(item, index) in col"
        :key="`col_${index}`"
        :prop="dropCol[index].prop"
        :width="dropCol[index].width"
        :min-width="200"
        :label="item.label"
        align="center"
      >
        <template slot-scope="scope">
          <div v-if="dropCol[index].prop === 'couponMoney'">
            <div v-if="scope.row.couponMoney != null">
              满{{ scope.row.conponLimitMoney }}减{{ scope.row.couponMoney }}元
            </div>
            <div v-if="scope.row.couponMoney == null">-</div>
          </div>
          <div v-if="dropCol[index].prop === 'couponSource'">
            <div v-if="scope.row.couponSource != null">
              <div v-if="scope.row.couponSource === 1">注册有礼</div>
              <div v-if="scope.row.couponSource === 2">门店派发</div>
              <div v-if="scope.row.couponSource === 3">总部派发</div>
              <div v-if="scope.row.couponSource === 4">抽奖活动</div>
            </div>
            <div v-if="scope.row.couponSource == null">-</div>
          </div>
          <div v-if="dropCol[index].prop === 'status'">
            <div v-if="scope.row.status != null">
              <div v-if="scope.row.status === 1">未使用</div>
              <div v-if="scope.row.status === 2">已使用</div>
              <div v-if="scope.row.status === 3">已失效</div>
            </div>
            <div v-if="scope.row.status == null">-</div>
          </div>
          <span
            v-if="
              dropCol[index].prop !== 'couponMoney' &&
                dropCol[index].prop !== 'couponSource' &&
                dropCol[index].prop !== 'status'
            "
            >{{ scope.row[dropCol[index].prop] }}</span
          >
        </template>
      </el-table-column>

      <!-- <el-table-column
                prop="couponSeq"
                label="优惠券编号"
                header-align="center"
                width="160"
             
            ></el-table-column>
            <el-table-column
                prop="couponName"
                label="优惠券名称"
                header-align="center"
                width="200"
             
            ></el-table-column>
            <el-table-column prop="couponMoney" label="优惠券面值" header-align="center" width="160">
                <template slot-scope="scope">
                    <span>满{{scope.row.conponLimitMoney}}减{{scope.row.couponMoney}}元</span>
                </template>
            </el-table-column>
            <el-table-column prop="memberName" label="会员名称" header-align="center" width="120"></el-table-column>
            <el-table-column prop="memberTel" label="手机号" header-align="center" width="120"></el-table-column>
            <el-table-column prop="couponSource" label="卡券来源" align="center" width="120">
                <template slot-scope="scope">
                    <span v-if="scope.row.couponSource == 1">注册有礼</span>
                    <span v-if="scope.row.couponSource == 2">门店派发</span>
                    <span v-if="scope.row.couponSource == 3">总部派发</span>
                    <span v-if="scope.row.couponSource == 4">抽奖活动</span>
                </template>
            </el-table-column>
            <el-table-column prop="createTime" label="领取时间" align="center" width="180"></el-table-column>
            <el-table-column prop="endTime" label="到期时间" align="center" width="120"></el-table-column> -->
      <!--
      <el-table-column prop="beginTime" label="有效期" align="center" width="180">
        <template slot-scope="scope">
          <span>{{scope.row.beginTime}}至{{scope.row.endTime}}</span>
        </template>
      </el-table-column>
            -->
      <!-- <el-table-column prop="status" label="使用状态" align="center" width="120">
                <template slot-scope="scope">
                    <span v-if="scope.row.status == '1'">未使用</span>
                    <span v-if="scope.row.status == '2'">已使用</span>
                    <span v-if="scope.row.status == '3'">已失效</span>
                </template>
            </el-table-column>
            <el-table-column prop="useTime" label="使用时间" header-align="center" width="180"></el-table-column>
            <el-table-column prop="storeName" label="使用门店" header-align="center" width="180"></el-table-column>
            <el-table-column prop="orderId" label="订单编号" header-align="center" width="180"></el-table-column> -->
      <!--<el-table-column prop="storeSeq" label="门店编号" header-align="center" width="120"></el-table-column>-->
      <!--<el-table-column prop="warzoneName" label="所在大区" header-align="center" width="160"></el-table-column>-->
    </el-table>

    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 30, 50, 100]"
        :current-page="listQuery.current"
        :page-size="listQuery.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>

    <!--列表配置-->
    <el-dialog
      title="列表配置"
      :visible.sync="configTableDialogVisible"
      width="50%"
      @close="closeConfigTableDialog()"
    >
      <div id="configTableDiv">
        <el-form :inline="true" :model="formInline2" class="demo-form-inline">
          <el-form-item label="选择列表字段：">
            <el-checkbox
              :indeterminate="formInline2.isIndeterminate"
              v-model="formInline2.isAll"
              style="margin-top:10px;"
              @change="isAllFieldChange"
              >全选</el-checkbox
            >
          </el-form-item>
          <el-divider></el-divider>
          <el-checkbox-group
            v-model="userMenuShowFields"
            @change="isSingleFieldChange"
          >
            <el-checkbox
              v-for="item in userMenuFieldList"
              :label="item.fieldCode"
              :key="item.fieldCode"
              style="margin:15px 10px;width:120px;"
              >{{ item.fieldName }}</el-checkbox
            >
          </el-checkbox-group>
        </el-form>
        <el-row>
          <el-col :span="24" style="text-align: center;margin-top: 30px">
            <el-button type="info" @click="closeConfigTableDialog()" size="mini"
              >取 消</el-button
            >
            <el-button
              type="primary"
              @click="insertUserFieldRelation()"
              size="mini"
              >确 认</el-button
            >
          </el-col>
        </el-row>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Sortable from 'sortablejs';
import {
  queryUserMenuFieldByParam,
  insertUserFieldRelation,
} from '@/api/tradeOrderSearch';
import {
  queryMemberCouponList,
  getWarzoneList,
} from '@/api/promotionProgramEdit';
import FileSaver from 'file-saver';
import XLSX from 'xlsx';
export default {
  data() {
    return {
      loading: true,
      exportLoading: false,
      formInline: {
        couponType: '',
        couponName: '',
        memberName: '',
        storeName: '',
        status: '',
        createTimeBegin: '',
        createTimeEnd: '',
        useTimeBegin: '',
        useTimeEnd: '',
        warzone: '',
      },
      total: 0,
      listQuery: {
        current: 1,
        size: 10,
      },
      tableData: [],
      goodsList: [],
      shopList: [],
      dialogVisibleGood: false,
      dialogVisibleShop: false,
      allCol: [],
      col: [],
      dropCol: [],
      insertLoading: false,
      configTableDialogVisible: false, //列表配置弹窗状态
      formInline2: {
        isIndeterminate: false, //是否半选中
        isAll: true, //是否全部显示,
        menuCode: 'couponUseRecord',
      },
      userMenuFieldList: [], //全部列名列表
      userMenuAllFields: [], //全部的列名
      userMenuShowFields: [], //显示的列名
      userOldMenuShowFields: [], //原显示的列名
    };
  },
  mounted() {
    this.getWarzoneList();
    this.useRecordList();
    this.queryUserMenuFieldByParam(); //加载列表配置字段
    document.body.ondrop = function(event) {
      event.preventDefault();
      event.stopPropagation();
    };
    // this.rowDrop()
    this.columnDrop();
  },
  methods: {
    //拖拽列表
    columnDrop() {
      const wrapperTr = document.querySelector('.el-table__header-wrapper tr');
      this.sortable = Sortable.create(wrapperTr, {
        animation: 180,
        delay: 0,
        onEnd: (evt) => {
          const oldItem = this.dropCol[evt.oldIndex - 1];
          this.dropCol.splice(evt.oldIndex - 1, 1);
          this.dropCol.splice(evt.newIndex - 1, 0, oldItem);
        },
      });
    },
    kong() {
      this.formInline.couponType = '';
      this.formInline.status = '';
      this.formInline.couponName = '';
      this.formInline.memberName = '';
      this.formInline.storeName = '';
      this.formInline.createTimeBegin = '';
      this.formInline.createTimeEnd = '';
    },
    getWarzoneList() {
      let data = {};
      getWarzoneList(data).then((res) => {
        this.warzoneList = res.records;
      });
    },
    handleSizeChange(val) {
      this.listQuery.size = val;
      this.useRecordList();
    },
    handleCurrentChange(val) {
      this.listQuery.current = val;
      this.useRecordList();
    },
    search() {
      this.listQuery.current = 1;
      this.useRecordList();
    },
    useRecordList() {
      let data = {
        size: this.listQuery.size,
        current: this.listQuery.current,
        condition: {
          couponType: this.formInline.couponType,
          couponName: this.formInline.couponName,
          memberName: this.formInline.memberName,
          storeName: this.formInline.storeName,
          status: this.formInline.status,
          createTimeBegin: this.formInline.createTimeBegin,
          createTimeEnd: this.formInline.createTimeEnd,
          useTimeBegin: this.formInline.useTimeBegin,
          useTimeEnd: this.formInline.useTimeEnd,
          zqorgSeq: this.formInline.warzone,
        },
        ascs: [],
        descs: [],
      };
      queryMemberCouponList(data).then((res) => {
        this.loading = false;
        this.tableData = res.records;
        this.total = res.total;
      });
    },
    useRecordListExcel() {
      let data = {
        size: this.total,
        current: 1,
        condition: {
          couponType: this.formInline.couponType,
          couponName: this.formInline.couponName,
          memberName: this.formInline.memberName,
          storeName: this.formInline.storeName,
          status: this.formInline.status,
          createTimeBegin: this.formInline.createTimeBegin,
          createTimeEnd: this.formInline.createTimeEnd,
          useTimeBegin: this.formInline.useTimeBegin,
          useTimeEnd: this.formInline.useTimeEnd,
          zqorgSeq: this.formInline.warzone,
        },
        ascs: [],
        descs: [],
      };
      queryMemberCouponList(data).then((res) => {
        if (res.code == 1) {
          this.tableDataExcel = res.records;
          if (this.tableDataExcel.length > 0) {
            this.exportExcel();
          } else {
            this.$message.error('数据为空无法导出!');
          }
        }
        setTimeout(() => {
          this.exportLoading = false;
        }, 3000);
      });
    },
    exportToo() {
      this.exportLoading = true;
      this.useRecordListExcel();
    },
    exportExcel() {
      var that = this;
      var arry = [
        [
          '序号',
          '优惠券编号',
          '优惠券名称',
          '优惠券面值',
          '会员名称',
          '手机号',
          '卡券来源',
          '领取时间',
          '到期时间',
          '使用状态',
          '使用时间',
          '使用门店',
          '订单编号',
        ],
      ];
      that.tableDataExcel
        .map((a, i) => {
          var _arry = [];
          _arry.push((1 + i).toString());
          _arry.push(a.couponSeq == null ? '' : a.couponSeq.toString());
          _arry.push(a.couponName == null ? '' : a.couponName.toString());
          _arry.push(
            a.conponLimitMoney == null
              ? ''
              : '满' + a.conponLimitMoney + '减' + a.couponMoney + '元'
          );
          _arry.push(a.memberName == null ? '' : a.memberName.toString());
          _arry.push(a.memberTel == null ? '' : a.memberTel.toString());
          _arry.push(
            a.couponSource == null
              ? ''
              : a.couponSource == 1
              ? '注册有礼'
              : a.couponSource == 2
              ? '门店派发'
              : a.couponSource == 3
              ? '总部派发'
              : a.couponSource == 4
              ? '抽奖活动'
              : ''
          );
          _arry.push(a.createTime == null ? '' : a.createTime.substr(0, 10)); //格式化日期没有就返回空
          _arry.push(a.endTime == null ? '' : a.endTime.substr(0, 10)); //格式化日期没有就返回空
          _arry.push(
            a.status == null
              ? ''
              : a.status == 1
              ? '未使用'
              : a.status == 2
              ? '已使用'
              : a.status == 3
              ? '已失效'
              : ''
          );
          _arry.push(a.useTime == null ? '' : a.useTime.substr(0, 10));
          _arry.push(a.storeName == null ? '' : a.storeName.toString());
          _arry.push(a.orderId == null ? '' : a.orderId.toString());
          return _arry;
        })
        .forEach((a) => {
          arry.push(a);
        });
      var sheet = XLSX.utils.aoa_to_sheet(arry);
      //循环单元格设置样式
      var s = sheet['!ref'];
      sheet['A2'].s = {
        font: {
          name: '宋体',
          sz: 18,
          color: { rgb: '#FFFF0000' },
          bold: true,
          italic: false,
          underline: false,
        },
        alignment: {
          horizontal: 'center',
          vertical: 'center',
        },
      };
      var rows = s.substr(s.length - 1, 1);
      var cloums = [
        'A',
        'B',
        'C',
        'D',
        'E',
        'F',
        'G',
        'H',
        'I',
        'J',
        'K',
        'L',
        'M',
      ];
      for (var j = 0; j < cloums.length; j++) {
        for (var i = 1; i <= rows; i++) {
          if (i == 1) {
            sheet[cloums[j] + i].s = {
              //样式
              font: {
                bold: true,
                italic: false,
                underline: false,
              },
              alignment: {
                horizontal: 'left',
                vertical: 'left',
                wrap_text: false,
              },
            };
          } else {
            sheet[cloums[j] + i].s = {
              //样式
              alignment: {
                horizontal: 'left',
                vertical: 'left',
                wrap_text: false,
              },
            };
          }
        }
      }
      sheet['!cols'] = [
        {
          wpx: 90,
        },
        {
          wpx: 90,
        },
        {
          wpx: 90,
        },
        {
          wpx: 90,
        },
        {
          wpx: 150,
        },
        {
          wpx: 150,
        },
        {
          wpx: 180,
        },
        {
          wpx: 150,
        },
        {
          wpx: 150,
        },
        {
          wpx: 150,
        },
        {
          wpx: 70,
        },
        {
          wpx: 150,
        },
        {
          wpx: 120,
        },
        {
          wpx: 120,
        },
        {
          wpx: 120,
        },
        {
          wpx: 120,
        },
        {
          wpx: 120,
        },
      ]; //单元格列宽
      this.openDownloadDialog(
        this.sheet2blob(sheet),
        new Date().toLocaleDateString() + '会员中奖记录表.xlsx'
      );
    },
    sheet2blob(sheet, sheetName) {
      sheetName = sheetName || 'sheet1';
      var workbook = {
        SheetNames: [sheetName],
        Sheets: {},
      };
      workbook.Sheets[sheetName] = sheet;
      // 生成excel的配置项
      var wopts = {
        bookType: 'xlsx', // 要生成的文件类型
        bookSST: false, // 是否生成Shared String Table，官方解释是，如果开启生成速度会下降，但在低版本IOS设备上有更好的兼容性
        type: 'binary',
      };
      var wbout = XLSX.write(workbook, wopts);
      var blob = new Blob([s2ab(wbout)], { type: 'application/octet-stream' });
      // 字符串转ArrayBuffer
      function s2ab(s) {
        var buf = new ArrayBuffer(s.length);
        var view = new Uint8Array(buf);
        for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xff;
        return buf;
      }
      return blob;
    },

    openDownloadDialog(url, saveName) {
      if (typeof url == 'object' && url instanceof Blob) {
        url = URL.createObjectURL(url); // 创建blob地址
      }
      var aLink = document.createElement('a');
      aLink.href = url;
      aLink.download = saveName || ''; //
      var event;
      if (window.MouseEvent) event = new MouseEvent('click');
      else {
        event = document.createEvent('MouseEvents');
        event.initMouseEvent(
          'click',
          true,
          false,
          window,
          0,
          0,
          0,
          0,
          0,
          false,
          false,
          false,
          false,
          0,
          null
        );
      }
      aLink.dispatchEvent(event);
    },

    //显示配置弹窗
    showConfigTableDialog() {
      this.userMenuShowFields = this.userOldMenuShowFields;
      let checkedCount = this.userMenuShowFields.length;
      this.formInline2.isAll = checkedCount === this.userMenuAllFields.length;
      this.formInline2.isIndeterminate =
        checkedCount > 0 && checkedCount < this.userMenuAllFields.length;
      this.configTableDialogVisible = true;
    },
    //关闭配置弹窗
    closeConfigTableDialog() {
      this.configTableDialogVisible = false;
      let data = {
        menuCode: this.formInline2.menuCode,
      };
    },
    queryUserMenuFieldByParam() {
      let data = {
        menuCode: this.formInline2.menuCode,
      };
      this.userMenuAllFields = []; //全部的列名
      this.userMenuShowFields = []; //显示的列名
      queryUserMenuFieldByParam(data).then((res) => {
        this.userMenuFieldList = res.records;
        this.userMenuFieldList.forEach((item, index) => {
          this.userMenuAllFields.push(item.fieldCode);
          if (item.isShow == 1) {
            this.userMenuShowFields.push(item.fieldCode);
          }
        });
        if (
          this.userMenuShowFields.length == 0 ||
          this.userMenuShowFields.length == this.userMenuAllFields.length
        ) {
          this.userMenuShowFields = this.userMenuAllFields;
          this.formInline2.isAll = true;
        } else {
          this.formInline2.isAll = false;
          this.formInline2.isIndeterminate = true;
        }
        this.insertUserFieldRelation(1);
      });
    },
    getNewCol() {
      let data = {
        menuCode: this.formInline2.menuCode,
      };
      this.col = [];
      this.dropCol = [];
      queryUserMenuFieldByParam(data).then((res) => {
        this.userMenuFieldList = res.records;
        this.userMenuFieldList.forEach((item, index) => {
          if (item.isShow == 1) {
            this.col.push({ label: item.fieldName, prop: item.fieldCode });
            this.dropCol.push({ label: item.fieldName, prop: item.fieldCode });
          }
        });
        if (this.col.length == 0) {
          this.col = this.allCol;
          this.dropCol = this.allCol;
          this.formInline2.isAll = true;
        }
      });
    },
    //保存显示字段
    insertUserFieldRelation(isInit) {
      if (
        this.userMenuShowFields == null ||
        this.userMenuShowFields.length == 0
      ) {
        this.$message({
          showClose: true,
          message: '列表字段不可为空',
          type: 'info',
        });
        return;
      }
      let data = {
        menuCode: this.formInline2.menuCode,
        fieldList: this.userMenuShowFields,
      };
      if (isInit == 1) {
        insertUserFieldRelation(data).then((res) => {
          if (res.code == 1) {
            this.userOldMenuShowFields = this.userMenuShowFields;
            this.closeConfigTableDialog();
            this.getNewCol();
          }
        });
        return;
      }
      this.insertLoading = true;
      insertUserFieldRelation(data).then((res) => {
        this.insertLoading = false;
        if (res.code == 1) {
          this.$message({
            showClose: true,
            message: res.message,
            type: 'success',
          });
          this.userOldMenuShowFields = this.userMenuShowFields;
          this.closeConfigTableDialog();
          this.getNewCol();
        } else {
          this.$message({
            showClose: true,
            message: res.message,
            type: 'error',
          });
        }
      });
    },
    //是否全选字段
    isAllFieldChange(val) {
      this.userMenuShowFields = val ? this.userMenuAllFields : [];
      this.formInline2.isIndeterminate = false;
    },
    //是否选中单个字段
    isSingleFieldChange(val) {
      let checkedCount = this.userMenuShowFields.length;
      this.formInline2.isAll = checkedCount === this.userMenuAllFields.length;
      this.formInline2.isIndeterminate =
        checkedCount > 0 && checkedCount < this.userMenuAllFields.length;
    },
    //获取字段勾选状态
    getUserMenuFieldStatus(fieldCode) {
      if (this.userMenuShowFields != null) {
        for (let i = 0; i < this.userMenuShowFields.length; i++) {
          if (this.userMenuShowFields[i] == fieldCode) {
            return true;
          }
        }
        return false;
      }
    },
    //是否显示字段
    isShow(fieldCode) {
      if (this.formInline2.isAll || this.getUserMenuFieldStatus(fieldCode)) {
        return true;
      } else {
        return false;
      }
    },
  },
};
</script>
<style lang="less" scoped>
.toptitle {
  border: 1px solid #e0e0e0;
  border-bottom: 2px solid #188097;
  background: #f5f5f5;
  line-height: 35px;
  margin-bottom: 10px;
  padding: 0 10px;
  font-size: 14px;
  font-weight: bold;
}
.el-input--small .el-input__inner {
  height: 32px;
  line-height: 32px;
}
.demo-form-inline {
  // border: 1px solid #ebeef5;
  padding: 20px 10px 0px 30px;
}

.partUl {
  overflow: hidden;
  width: 100%;
  margin-left: 0px;
  margin-top: 20px;
}
.emptyLi {
  text-align: center;
  padding-top: 100px;
  font-size: 14px;
  color: #d6d6d6;
}
.partLi {
  float: left;
  margin-left: 20px;
  margin-bottom: 20px;
}
.partDiv {
  border: 1px solid #ffcc00;
  border-radius: 10px;
  width: 250px;
  text-align: center;
}
.partDivBg1 {
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-image: url('../../assets/images/coupon/couponBg1.png');
}
.partDivBg2 {
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-image: url('../../assets/images/coupon/couponBg2.png');
}
.partDivBg3 {
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-image: url('../../assets/images/coupon/couponBg3.png');
}
.partDiv0 {
  margin-top: 5px;
  text-align: right;
  float: right;
  padding-right: 5px;
  padding-top: 2px;
  background-color: transparent;
}
.partDiv1 {
  color: #fff;
  line-height: 20px;
  padding: 15px;
  padding-left: 10px;
  padding-top: 45px;
}
.partDivNum {
  color: #fff;
  line-height: 30px;
  padding: 0px;
  padding-right: 10px;
  text-align: right;
  background-color: #f27e7a;
}
.partDiv2 {
  background-color: #f9faf9;
  line-height: 30px;
  padding: 20px;
  font-size: 12px;
}
.partButton {
  height: 30px;
  line-height: 30px;
  border-radius: 15px;
  background-color: transparent;
}
.partDivF {
  float: left;
  width: 5px;
  height: 5px;
  border-radius: 0px 0px 5px 0px;
}
.partDivC {
  float: left;
  width: 10px;
  height: 5px;
  border-radius: 0px 0px 5px 5px;
}
.partDivE {
  float: right;
  width: 5px;
  height: 5px;
  border-radius: 0px 0px 0px 5px;
}
.triangle {
  overflow: hidden;
  position: static;
}
.triangle-back {
  position: absolute;
  border-top: 60px solid #f44336;
  border-right: 60px solid #f27e7a;
}
.triangle-text {
  overflow: hidden;
  width: 40px;
  font-size: 12px;
  color: #fff;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  padding-top: 14px;
  margin-left: -5px;
}
.partDiv-One > .partDiv1 {
  background-color: #f27e7a;
}
.partDiv-One > .partDivSmall > .partDivF,
.partDiv-One > .partDivSmall > .partDivC,
.partDiv-One > .partDivSmall > .partDivE {
  background-color: #f27e7a;
}
.partDiv-One > .partDiv2 {
  background-color: #f9faf9;
  color: #f27e7a;
}
.partDiv-One .partButton {
  border: 2px solid #f27e7a;
  color: #f27e7a;
}
.partDiv-Two > .partDiv1,
.partDiv-Two > .partDivSmall > .partDivF,
.partDiv-Two > .partDivSmall > .partDivC,
.partDiv-Two > .partDivSmall > .partDivE {
  background-color: #74d3d3;
}
.partDiv-Two > .partDiv2 {
  background-color: #f9faf9;
  color: #74d3d3;
}
.partDiv-Two .partButton {
  border: 2px solid #74d3d3;
  color: #74d3d3;
}
.partDiv-Three > .partDiv1,
.partDiv-Three > .partDivSmall > .partDivF,
.partDiv-Three > .partDivSmall > .partDivC,
.partDiv-Three > .partDivSmall > .partDivE {
  background-color: #85c1e9;
}
.partDiv-Three > .partDiv2 {
  background-color: #f9faf9;
  color: #85c1e9;
}
.partDiv-Three .partButton {
  border: 2px solid #85c1e9;
  color: #85c1e9;
}
.partDiv-One > .triangle > .triangle-back {
  border-right: 60px solid #f27e7a;
}
.partDiv-Two > .triagnle > .triangle-back {
  border-right: 60px solid #74d3d3;
}
.partDiv-Three > .triagnle > .triangle-back {
  border-right: 60px solid #85c1e9;
}
</style>
